<!-- 门店订单 -->
<template>
	<view class="pages relative">
		<!-- 顶部 -->
		<view class="pages-top bgc-w boxShadow">
			<!-- 搜索框位置&&筛选按钮 -->
			<view class="pages-top-item row-box">
				<p-search style="height: 72rpx;flex: 1;" />
			</view>
			<!-- 状态 -->
			<view class="state-box row-box bgc-w" v-if="stateList.length">
				<view class="state-item flex align-items-center justify-content-center"
					:class="{'state-item-ac':index==stateIndex}" v-for="(item,index) in stateList" :key="index "
					@click="changeState(index)">
					<text>
						{{item.title}}
						<text class="iconfont" v-if="item.sort=='all'">&#xe612;</text>
						<text class="iconfont" v-if="item.sort=='rise'">&#xe622;</text>
						<text class="iconfont" v-if="item.sort=='fall'">&#xe621;</text>
					</text>
				</view>
			</view>
		</view>

		<!-- 内容 -->
		<view class="pages-list-box relative pt-20" v-if="pagesLists&&pagesLists.length">
			<view class="pages-card flex align-items-center" v-for="(item,index) in pagesLists" :key="index" @click="">
				<u-radio activeColor='#00A191'></u-radio>
				<view class="flex align-items-center ml-20">
					<image class="avatar" src="/static/images/common/avatar.png" mode="scaleToFill"></image>
					<view class="ml-20">
						<view class="fs-lg fc-0">PM_陈祥龙 @微信</view>
						<view class="fs-sm">消费 ￥51.8W 消费次数 1K+ 浏览 1K+ </view>
					</view>
				</view>
			</view>
		</view>
		<view class="pages-list-box relative" v-else>
			<u-empty mode="data" icon="/static/images/common/no_data.png"></u-empty>
		</view>
		<!-- 技术支持 -->
		<p-support class=""></p-support>

		<!-- 底部 -->
		<g-pages-bottom>
			<view class="p-30">
				<view class="btn-ac" @click="">
					确定
				</view>
			</view>
		</g-pages-bottom>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				// 筛选框
				filterShow: false,
				// 筛选时间索引
				timeIndex: 0,
				// 筛选服务索引
				filterIndex: 0,
				// 门店订单状态索引
				stateIndex: 0,
				// 门店订单来源
				ptIndex: 0,
				//数据
				pagesLists: [1, 2, 3, 4],
				// 状态列表
				stateList: []
			};
		},
		onLoad() {
			this.setStateList()
		},
		methods: {
			// 设置状态列表
			setStateList() {
				this.stateList = [{
					title: '全部',
					sort: 'all'
				}, {
					title: '待配送',
					sort: 'all'
				}, {
					title: '待核销/待自提',
					sort: 'all'
				}, {
					title: '退款售后',
					sort: 'all'
				}, ]
			},
			// 切换顶部导航索引
			changePagesTab(index) {},
			//切换状态
			changeState(index) {
				if (this.stateIndex == index) {
					if (this.stateList[this.stateIndex].sort == 'all') {
						this.stateList[this.stateIndex].sort = 'rise'
						return
					}
					if (this.stateList[this.stateIndex].sort == 'rise') {
						this.stateList[this.stateIndex].sort = 'fall'
						return
					}
					if (this.stateList[this.stateIndex].sort == 'fall') {
						this.stateList[this.stateIndex].sort = 'all'
						return
					}
				} else {
					this.stateList[this.stateIndex].sort = 'all'
					this.stateIndex = index
					this.stateList[this.stateIndex].sort = 'all'
				}
			},
			// 清除筛选
			onCancel() {
				this.filterShow = false
			},
			// 提醒使用
			onUse() {
				console.log('onUse', )
			},
			// 已到店
			inStore() {
				console.log('inStore', )
			},
			// 去详情
			onDetails(val) {
				console.log('onDetails')
				this.$fn.toPages(`/pages/order/details?id=${0}`)
			},
			// 核销
			verification() {
				console.log('verification', )
				this.$fn.toPages(`/pages/verification/verificationGoods?id=${0}`)
			},
			// 到店核销
			storeVerification() {
				console.log('storeVerification', )
				this.$fn.toPages(`/pages/verification/verificationCoupon?id=${0}`)

			},
		},
		computed: {
			timeList() {
				return [{
					title: '全部'
				}, {
					title: '今日'
				}, {
					title: '昨日'
				}, {
					title: '本周'
				}, {
					title: '本月'
				}, {
					title: '近半年'
				}, {
					title: '近一年'
				}, {
					title: '自定义'
				}, ]
			},
			pagesTab() {
				return [{
					title: '全部',
				}, {
					title: '接龙'
				}, {
					title: '本地生活'
				}, {
					title: '商城'
				}, ]
			},

		}
	}
</script>

<style lang="scss" scoped>
	.static {
		position: static;
	}

	.pages-top {
		width: 750rpx;
		padding: 0 30rpx;
		position: sticky;
		top: 0;
		z-index: 3;

		.pages-top-item {
			height: 100rpx;
			margin: 0 auto;
		}
	}

	.pages-list-box {
		z-index: 1;
	}

	.state-box {
		height: 80rpx;

		.state-item-ac {
			text {
				color: #333;
				font-weight: 900;
			}
		}


	}

	.avatar {
		width: 96rpx;
		height: 96rpx;
	}
</style>